<template>
  <div v-title="'邻里圈 - 世外生活运营平台'" class="MkNeighbourCircleMgt">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="PublicListStyle ">

      <div class="searchDiv marginBottom-20">
        <el-cascader
          :props="options"
          :options="siteArr"
          v-model="siteSelect"
          placeholder="请选择站点"
          @change="handleChange">
        </el-cascader>
      </div>
        <div class="itemContainer" v-loading="loadingTab"  element-loading-text="拼命加载中">
          <template v-for="item in dataArr.elements">
            <div class="contentCell" @click="showDetail(item.id)">
              <div class="operateDiv">
                <el-button type="text" v-if="item.top" @click.stop="handleCancelUp(item.id)">取消置顶</el-button>
                <el-button type="text" v-else @click.stop="handleUp(item.id)">置顶</el-button>
                <el-button type="text" v-if="item.publish" @click.stop="downCircle(item.id)">下架</el-button>
                <el-button type="text" v-else @click.stop="upCircle(item.id)">上架</el-button>
              </div>
              <div class="topDiv">
                <img :src="item.avatar" alt="" class="userPhoto">
                <div class="userInfo">
                  <div class="userName">{{item.name}}</div>
                </div>
              </div>
              <div class="centerDiv preContainer">
                <pre>{{item.content}}</pre>
                  </div>
              <div class="imagesDiv" v-if="item.images && item.images.length>0">
                <div class="imageOuter" v-for="i in item.images">
                  <img :src="i.thumbImageURL" alt="">
                </div>
              </div>
              <div class="downDiv">
                <span>{{item.time | formatDate('yyyy-MM-dd HH:mm')}}</span>
                <span>（{{item.loveAmount}}）赞</span>
                <span>（{{item.transmitAmount}}）转发</span>
                <span>（{{item.commentAmount}}）评论</span>
              </div>
            </div>
          </template>
          <el-pagination v-if='dataArr.elements.length>0'
                         @current-change="loadData"
                         :current-page="dataArr.page"
                         :page-size="dataArr.size"
                         layout="total, prev, pager, next"
                         :total="dataArr.totalAmount">
          </el-pagination>
          <div class="hasNoData" v-else>
            暂无数据
          </div>
      </div>

      <!--详情-->
      <mk-neighbour-circle-detail :showDialog='dialogVisible_detail'  v-on:closeDialog='closeDialog_detail' :currentId="currentId"></mk-neighbour-circle-detail>

    </div>
    </el-scrollbar>
  </div>

</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import { mapState } from 'vuex'
  import MkNeighbourCircleDetail from './MkNeighbourCircleDetail'
  import neighbourCircle from '../../../services/neighbourCircle'
  export default {
    name: 'MkNeighbourCircleMgt',
    components: {
      MkBreadcrumb,MkNeighbourCircleDetail
    },
    filters:{
      formatDate(value,type) {
          if(value) {
              return new Date(value).pattern(type);
          }
      }
    },
    computed:mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      siteArr: state => {
        let arr = [{id:'',name:'全部'}];
        let data = state.site.siteTree;
        if(data.children){
          for(var i=0;i<data.children.length;i++) {
            let item = data.children[i];
            if(item.children && item.children.length>0) {
              arr.push(item);
            }
          }
        }
        return arr;
      }
    }),
    methods: {
      downCircle(id) {
        neighbourCircle.downCircleServer({id:id},()=>{
          this.$message.success('下架成功');
          this.loadData();
        })
      },
      upCircle(id) {
        neighbourCircle.upCircleServer({id:id},()=>{
          this.$message.success('上架成功');
          this.loadData();
        })
      },
      handleUp(id) {
        neighbourCircle.handleUpServer({id:id},() =>{
          this.$message.success('置顶成功');
          this.loadData();
        })
      },
      handleCancelUp(id) {
        neighbourCircle.handleCancelUpServer({id:id},() =>{
            this.$message.success('取消置顶成功');
            this.loadData();
        })
      },
      showDetail(id) {
        this.currentId = id;
        this.dialogVisible_detail = true;
      },
      closeDialog_detail(type) {
        if(type) {
            this.loadData();
        }
        this.dialogVisible_detail = false;
      },
      handleChange() {
        this.searchCondition.siteId = this.siteSelect[this.siteSelect.length - 1];
        this.loadData(1);
      },
      loadData(page) {
          if(page){
              this.searchCondition['page.pn'] = page;
          }
        this.loadingTab = true;
        neighbourCircle.loadCircleListServer(this.searchCondition,data=>{
          this.dataArr = data.data;
          this.loadingTab = false;
        })
      },
      loadSite() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'});
      }
    },
    activated(){
      this.loadData(1);
    },
    mounted: function() {
      this.loadSite();
    },
    data () {
      return {
        currentId:'',
        searchCondition: {
          'page.pn':1,
          'page.size':10,
          siteId:'',
        },
        options: {
          value: 'id',
          label:'name',
          children: 'children'
        },
        siteSelect: [''],
        dialogVisible_detail:false,
        dataArr:{
          elements:[{
              content:'测试'
          }],
          totalAmount:'',
          size:'',
          page:'',
        },
        loadingTab: false,
        breadcrumbData: {
          list:[
            {name:'邻里圈',path: null, clickAble: false},
            {name: '邻里圈管理',path: null, clickAble: false}
         ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'circle-icon',
        }
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../assets/style/main.less";
  .MkNeighbourCircleMgt{
    .el-pagination{
      padding-right:20px;
      border-top:none;
    }
    .hasNoData{
      text-align: center;
      padding:200px 0;
      color:@fontColorThree;
    }
    .el-scrollbar{
      width:100%;
    }
    .searchDiv{
      .el-cascader{
        width:360px;
        height:46px;
        .el-cascader__label{
          line-height: 46px;
        }
        .el-input{
          .el-input__inner{
            background-color: #fff;
            height:46px;

          }
        }
      }

    }
    .itemContainer{
      padding-top: 30px;
      background:#fff;
      .contentCell{
        position: relative;
        cursor: pointer;
        border-bottom:1px solid @borderColor;
        padding:20px 30px;
        .topDiv{
          padding-left:50px;
          .userPhoto{
            float: left;
            margin-left:-50px;
            width:50px;
            height:50px;
            border:1px solid @borderColor;
            .my-border-radius(50px);
          }
          .userInfo{
            margin-left:10px;
            .userName{
              line-height: 52px!important;
            }
            /*.userTime{*/
            /*line-height: 20px!important;*/
            /*}*/
          }
        }
        .centerDiv{
          margin-top:10px;
          line-height: 20px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .downDiv{
          line-height: 20px;
          margin-top:10px;
          span{
            font-size:12px;
            margin-right:20px;
            color:@fontColorThree;
          }
        }
        .imagesDiv{
          .imageOuter{
            display: inline-block;
            margin: 10px 10px 0 0;
            .showImageInFixedContainer(80px,80px);
          }
        }
        .operateDiv{
          position:absolute;
          top:30px;
          right:20px;
        }
        &:hover{
          background:@hoverGreenColor;
        }
      }
    }
  }
</style>
